@import "./vars.scss";
.recruitl-container {
    background-color: #f8f9fa;
    padding-bottom: 40px;
    .recuit-h2 {
        padding-bottom: 3px;
    }
    .recl-list {
        overflow: hidden;
        .c666 {
            color: $color5;
        }
        .recl-item {
            max-height: 76px;
            overflow: hidden;
            background-color: #fff;
            @include transition(max-height 1s);
            padding: 0 33px 0 18px;
            margin-top: 16px;
            .recl-footer {
                text-align: center;
                .recl-btn {
                    width: 198px;
                    margin-top: 50px;
                }
            }
            &.active {
                max-height: 1000px;
                padding: 0 33px 39px 18px;
                .recl-title::before {
                    padding: 26px 0 13px;
                    top: 3px;
                    color: $color3;
                    content: "\e618";
                }
            }
        }
        .recl-title {
            position: relative;
            font-size: 16px;
            cursor: pointer;
            @include transition(all 0.5s);
            padding: 29px 0 31px;
            line-height: 1;
            &::before {
                position: absolute;
                right: 0;
                top: 29px;
                color: $color5;
                content: "\e616";
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
        .recl-subtitle {
            list-style: 24px;
            font-family: sscl;
        }
        .recl-body {
            margin-top: 50px;
            font-family: ssnm;
            @include display(flex);
            line-height: 24px;
            .iconfont {
                font-size: 16px;
                margin-right: 13px;
                color: $color10;
                &.tr3i {
                    font-size: 18px;
                }
                &.tr5i {
                    font-size: 17px;
                }
                &.tr4i {
                    font-size: 14px;
                    padding-left: 1px;
                }
            }
            .recl-left,
            .recl-right {
                width: 50%;
                @include flex(50% 0 0);
            }
            .recl-tb1 {
                tr {
                    td:first-child {
                        width: 30px;
                    }
                    td {
                        vertical-align: top;
                    }
                    &:nth-child(2) {
                        font-size: 12px;
                        color: $color10;
                    }
                }
            }
            .recl-dl {
                @include display(flex);
                .recl-dd {
                    p {
                        position: relative;
                        padding-left: 10px;
                        &:before {
                            position: absolute;
                            left: -3px;
                            content: "・";
                        }
                    }
                }
            }
        }
        .recl-tb2 {
            tr td {
                vertical-align: top;
                &:first-child {
                    width: 100px;
                }
            }
        }
    }
}

.recruit-container {
    overflow: hidden;
    background-color: #fff;
    .sub-h2 {
        padding-bottom: 14px;
    }
    .recruit-form {
        margin-top: 38px;
    }
}